<template>
  <div id="app">
    <van-button type="info" @click="wap">点击跳转HI</van-button>
    <!-- loaction跳转地址栏刷新 -->
    <van-button type="info" onclick="location='/'">点击跳转Hellow</van-button>
    <!-- 用router-link进行跳转，地址栏不需要刷新 -->
    <!-- <div class="vbutton"><router-link to="/hellow">点击跳转</router-link></div> -->
    <DemoHeard :user="name" @changedemo="changedemo"></DemoHeard>
    <!-- .sync的用法，在父组件里面通过子组件的自定义事件来更新父组件的数据 -->
    <childA v-show="show" :show.sync="show" />
    <childB />
    <router-view></router-view>
  </div>
</template>

<script>
import { Button } from 'vant'
//引入heard组件
import DemoHeard from './components/heard'
//引入两个兄弟组件A-B
import childA from './components/childA'
import childB from './components/childB'
export default {
  name: 'App',
  //方法
  methods: {
    wap() {
      this.$router.push('/hi')
    },
    //接受子组件的自定义事件，e是传递过来的值
    changedemo(e) {
      console.log(e)
      this.name.unshift(e)
    },
  },
  //组件
  components: {
    [Button.name]: Button,
    DemoHeard,
    childA,
    childB,
  },
  //数据
  data() {
    return {
      showw: true,
      name: ['小红', '小超', '小马', '小鹿'],
      show: true,
      //分辨率
      resolutionratio: '',
    }
  },
  created() {
    //埋点获取屏幕分辨率
    let winowHeight = window.screen.height
    let windowidth = window.screen.width
    console.log(winowHeight, windowidth) //667 375
    //获取语言
    console.log(navigator.language) //zh-CN
    //获取URL地址
    console.log(document.URL) //http://localhost:8080/#/hellow
    //获取域名
    console.log(document.domain) //localhost
    //获取Referrer
    console.log(document.referrer) //http://localhost:8080/
    //颜色深度
    console.log(window.screen.colorDepth) //24
    //获取title
    console.log(document.title) //demo
  },
}
</script>

<style >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.vabutton {
  display: inline-block;
  width: 102px;
  height: 44px;
  background-color: #0c9963;
}
</style>
